<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>同一个案列用监视属性和监听属性实现</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>

    <div id="root">
        姓:<input type="text" v-model:value="firstname"> 名:
        <input type="text" v-model:value="lastname"> 姓名:


        <input type="text" v-model:value="fullname">
    </div>

    <script>
        /*
                                                     
                            computed和watch之间的区别

                        1.computed能完成的功能，watch都可以完成
                        2.函数里面涉及到异步操作（setTimeout,ajax等），只能用watch
                        3.所有vue管理的函数，最好写成普通函数，这样this的指向才是vm，或组件实例对象
                        4.所有不别vue所管路的函数(定时器回调函数，ajax的回调函数等，最好写成箭头函数)，
                        这样this的指向才会是vm或组件实例对象
                                                     */

        const vm = new Vue({
            el: "#root",
            data: {
                firstname: "邓",
                lastname: '紫琪',
                fullname: "邓紫棋2" //watch实现要准备好初始值

            },
            //用计算属性实现:fullname
            // computed: {
            //     fullname: {
            //         get() {
            //             console.log(this)
            //             console.log("get被调用了")
            //             return this.firstname + this.lastname
            //         },
            //         set(value) {
            //             const arr = value.split('-')
            //             this.firstname = arr[0]
            //             this.lastname = arr[1]
            //         }
            //     }
            // },

            //用监视属性实现：fullname
            // watch: {
            //     //姓的检测
            //     firstname(newValue, oldValue) {
            //         this.fullname = newValue + this.lastname
            //     },
            //     //名的检测
            //     lastname(newValue, oldValue) {
            //         this.fullname = this.firstname + newValue
            //     }
            // },


            //对比总结: 监视属性与计算属性中最大的区别在于:函数里面需要执行异步操作时用watch，没有异步操作常用computed

            //给watch里面添加异步操作
            watch: {
                //姓的检测
                firstname(newValue, oldValue) {
                    //箭头函数的this指向声明时所在作用域下,而函数firstname实在vm上的所以this是vm，箭头函数this也是vm
                    //这个不能用普通函数，setTimeout(),setInterval()以普通函数来写this指向window
                    // setTimeout(() => {
                    //     console.log(this)
                    //     this.fullname = newValue + this.lastname
                    // }, 1000);
                    setTimeout(()=>{
                        console.log(this)
                        this.fullname = newValue+oldValue
                    },2000)

                },
                //名的检测
                lastname(newValue, oldValue) {
                    setTimeout(() => {
                        this.fullname = this.firstname + newValue
                    }, 1000)
                }

            },


            //计算属性添加异步操作
            // computed: {
            //     fullname() {
            //         //这块返回值会返回到setTimeout上，而fullname返回为undeined，所以有异步操作时不能用计算属性。要用watch
            //         setTimeout(() => {
            //             return this.firstname + this.lastname
            //         }, 2000)

            //     }
            // },

        });
        console.log(vm)
    </script>
</body>

</html